<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品列表</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/theme-chalk/index.css">
    <link rel="stylesheet" href="css/common.css">
    <style>
        .productsColor {
            background-color: #ffffff;
            color: #000000;
            border: 1px solid #dadada;
        }

        /* 放大的图片，通过定位将左上角定位到(0,0) */
        .rightImg {
            display: inline-block;
            width: 800px;
            height: 800px;
            position: absolute;
            top: 0;
            left: 0;
        }

        .dddd {
            position: absolute;
            top: 0;
        }

        /* 右边的区域图片放大空间 */
        .right {
            z-index: 50000;
            margin-left: 412px;
            width: 400px;
            height: 400px;
            border: 1px solid red;
            position: relative;
            overflow: hidden;
        }

        /* 一个最高层层罩 */
        .maskTop {
            width: 400px;
            height: 400px;
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
        }

        /* 层罩，通过定位将左上角定位到(0,0) */
        .left .top {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            opacity: 0.4;
            position: absolute;
            top: 0;
            left: 0;
        }

        /* 原图的显示 */
        .leftImg {
            /* width: 400px; */
            max-height: 100%;
            max-width: 100%;
            display: inline-block;
        }

        /* 原图的容器 */
        .left {
            /* width: 400px; */
            height: 400px;
            line-height: 400px;
            overflow: hidden;
            text-align: center;
            max-width: 100%;
            border: 1px solid teal;
            /* float: left; */
            position: relative;
        }

        .imgList {
            max-width: 100%;
            margin-top: 20px;
            display: flex;
            /* overflow-x: scroll; */
            overflow: hidden;
        }

        .imgList .item {
            width: 66.6666px;
            height: 44.6666px;
            line-height: 44.6666px;
            border: 1px solid #747474;
            overflow: hidden;
            /* box-sizing: border-box; */
        }

        .imgList .active {
            border: 2px solid #d80a0a;
        }

        .imgList .item:not(:nth-child(1)) {
            margin-left: 20px;
        }

        .imgList .item img {
            width: 100%;
        }

        .el-tabs--border-card {
            margin-top: 20px;
            width: 100%;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        .detailedTop {
            display: flex;
            width: 100%;
            border-top: 1px solid #a0a0a0;
            margin-top: 20px;
            padding: 20px 20px 0px 20px;
        }

        .detailedTop .item {
            flex: 1;
        }

        .el-tabs--border-card>.el-tabs__header {
            background-color: #3f4b57;
            /* font-weight: 600;
            color: #ffffff; */
        }

        .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
            color: #ffffff;
            background-color: #c00;
            /* border-right-color: #DCDFE6;
            border-left-color: #DCDFE6; */
        }
        .htmlDescStyle img{
            max-width: 100%;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class=" top" v-if="isShow">
            <div class="headerNav">
                <div class="row" style="height: 160px;">
                    <div class="col-sm-3">
                        <div class="img" style="height: 160px;line-height: 160px;">
                            <img src="images/aoklight.png" style="height: 130px;" alt="">
                        </div>
                    </div>
                    <div class="col-sm-7" style="text-align: right;">
                        <span><svg t="1612754067666" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="1647" width="20" height="20">
                                <path d="M65.2 202.9H960v617.7H65.2z" fill="#00237A" p-id="1648"></path>
                                <path
                                    d="M960 419.8H599V202.9H423.5v216.9H65.2v184.1h358.3v216.7H599V603.9h361V419.8z m0 0"
                                    fill="#FFFFFF" p-id="1649"></path>
                                <path d="M960 750.2L165.6 202.9H65.2v71.2l793.7 546.5H960v-70.4z m0 0" fill="#FFFFFF"
                                    p-id="1650"></path>
                                <path d="M65.2 750.2L859.6 203H960v71.2L166.3 820.6H65.2v-70.4z m0 0" fill="#FFFFFF"
                                    p-id="1651"></path>
                                <path
                                    d="M960 458.5H562.1V202.9H460.3v255.5H65.2v106.8h395.1v255.4h101.8V565.3H960V458.5z m0 0"
                                    fill="#CF142B" p-id="1652"></path>
                                <path
                                    d="M960 820.6v-48.5L713.8 603.9h-69.3L960 820.6z m0-617.7h-69.3L599 401.6v18.2h43.3L960 202.9z m-582 401L65.2 819.1v1.5h66.4l291.8-200v-16.7H378z m-312.8-401v48.5l244.9 168.4h70L65.2 202.9z m0 0"
                                    fill="#CF142B" p-id="1653"></path>
                            </svg> Engilsh</span>
                        <span><svg t="1612754127821" class="icon" viewBox="0 0 1609 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2708" width="20" height="20">
                                <path d="M0.219429 1.536H1607.68v1020.781714H0.219429z" fill="#FFFFFF" p-id="2709">
                                </path>
                                <path d="M1071.762286 1.536h535.844571v1020.781714h-535.844571z" fill="#E73826"
                                    p-id="2710"></path>
                                <path d="M0 1.536h535.844571v1020.781714H0z" fill="#00489D" p-id="2711"></path>
                            </svg> Français</span>
                        <span> <img src="images/Espanol.png" alt=""> Español</span>
                        <span> <svg t="1612754337813" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="8279" width="20" height="20">
                                <path d="M23.273 134.982h977.454v218.763H23.273z" fill="#211613" p-id="8280"></path>
                                <path d="M23.273 351.418h977.454v214.11H23.273z" fill="#C73936" p-id="8281"></path>
                                <path d="M23.273 565.527h977.454v218.764H23.273z" fill="#E7CA2D" p-id="8282"></path>
                            </svg> Deutsch</span>
                    </div>
                    <div class="col-sm-2">
                        <a href="#">Sign in</a>|
                        <a href="#">Register</a>
                    </div>
                </div>
            </div>
        </div>
        <el-backtop :visibility-height="60">
            <i class="el-icon-caret-top"></i>
        </el-backtop>
        
        <!-- <div> -->
            <div class="headerImg" v-if="!isShow">
                <img src="images/aoklight.png" style="height: 38px;" alt="">
            </div>
        <!-- </div> -->
        <div class="header sticky-top ">
            <div class="container">
                <div class="headerNav">
                    <nav class="navbar navbar-expand-lg navbar-light" style="padding: 0;">
                        <button class="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>

                        <div class="collapse navbar-collapse" style="position: relative;" id="navbarSupportedContent">
                            <ul class="navbar-nav mr-auto navUl">
                                <li class="nav-item">
                                    <a class="nav-link" href="#">首页</a>
                                </li>
                                <li class="nav-item dropdown active" @mouseover="selectStyle"
                                    @click="window.location.href = 'projects.html'">
                                    <a class="nav-link dropdown-toggle" href="projects.html" id="navbarDropdown"
                                        role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        产品 <i class="el-icon-arrow-down"></i>
                                    </a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdown" v-if="dropdownShow">
                                        <a class="dropdown-item" href="#">Action</a>
                                        <a class="dropdown-item" href="#">Another action</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Something else here</a>
                                    </div>
                                </li>
                                <!-- pc端Products hover -->
                                <div class="dropdownDiv" v-if="navShow" @mouseleave="outStyle">
                                    <div class="row" style="margin-left: 0;margin-right: 0;">
                                        <div class="col-md-3">
                                            <div :class="['item',dropdownIndex === index ? 'active':'']" class="item"
                                                @mouseover="selectDropdownDiv(item,index)"
                                                v-for="(item,index) in dropdownList" :key="index">
                                                {{ item.title }}
                                            </div>
                                        </div>
                                        <div class="btnPrimaryActive col-md-9" style="text-align: left;">
                                            <el-button type="primary" plain v-for="(item,index) in btnList"
                                                :key="index">{{item.name}}</el-button>
                                        </div>
                                    </div>
                                </div>
                                <li class="nav-item">
                                    <a class="nav-link" href="case.html">项目案例</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="download.html">资源下载</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="contact-us.html">联系我们</a>
                                </li>
                                <div class="ffgg" style="height: 60px;">
                                    <div class="btn-group" style="height: 100%;">
                                        <button type="button" class="btn" style=" font-weight: 600;" @click="window.location.href = 'aboutUs.html'">关于我们 </button>
                                        <button type="button" class="btn dropdown-toggle dropdown-toggle-split"
                                            id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false" data-reference="parent">
                                            <span class="el-icon-arrow-down"></span>
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
                                            <!-- <i class="el-icon-arrow-down"></i> -->
                                            <a class="dropdown-item" href="faqlist.html">FAQ</a>
                                            <a class="dropdown-item" href="aok-production-center.html">AOK Production
                                                Center</a>
                                            <a class="dropdown-item" href="aok-testing-facilities.html">Aok Testing
                                                Facilities</a>
                                        </div>
                                    </div>
                                </div>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>

        <div class="headerNav">
            <div class="breadcrumb">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>
                        <a href="index.html">
                            <svg t="1612527160614" class="icon" viewBox="0 0 1000 1000" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="1582" width="14" height="14">
                                <path
                                    d="M969.5 572.557l-468.75-363.867-468.75 363.867v-148.359l468.75-363.867 468.75 363.867zM852.313 559.344v351.563h-234.375v-234.375h-234.375v234.375h-234.375v-351.563l351.563-263.672z"
                                    p-id="1583" fill="#303133"></path>
                            </svg>
                            Home
                        </a>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/">Products</a></el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/">{{id}}</a></el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="main">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="productsColor">Products</div>
                        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                    </div>
                    <div class="col-sm-9">
                        <div class="row">
                            <div class="col-sm-6">
                                <div style="width: 100%;">
                                    <div class="left">
                                        <img class="leftImg" :src="imgUrl" alt="">
                                        <!-- 鼠标层罩 -->
                                        <div v-show="topShow" class="top" :style="topStyle"></div>
                                        <!-- 最顶层覆盖了整个原图空间的透明层罩 -->
                                        <div class="maskTop" @mouseenter="enterHandler" @mousemove="moveHandler"
                                            @mouseout="outHandler"></div>
                                    </div>
                                    <div class="dddd">
                                        <div v-show="rShow" class="right">
                                            <img :style="r_img" class="rightImg" :src="imgUrl" alt="">
                                        </div>
                                    </div>
                                </div>

                                <div class="imgList">
                                    <div :class="['item',imgIndex === index ? 'active':'']"
                                        v-for="(item,index) in imgList" :key="index" v-if="index < 6"
                                        @mouseenter="lookImg(item.url,index)">
                                        <img :src="item.url" alt="">
                                    </div>
                                </div>
                                <div style="margin-top: 10px;">
                                    share to:
                                    <svg t="1612600235500" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="3063" width="20" height="20">
                                        <path
                                            d="M512 0C229.052632 0 0 229.052632 0 512s229.052632 512 512 512 512-229.052632 512-512S794.947368 0 512 0z m122.745263 512h-79.386947v269.473684h-117.921684V512H377.263158v-92.833684h60.173474v-56.643369c0-74.698105 33.684211-119.996632 127.514947-119.996631h79.386947v92.833684h-48.128c-36.109474 0-38.480842 13.608421-38.480842 36.217263v45.298526H646.736842L634.718316 512z"
                                            fill="#3b5998" p-id="3064"></path>
                                    </svg>
                                    <svg t="1612600351762" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="5146" width="20" height="20">
                                        <path
                                            d="M512.739532 1023.998464c-207.359689 0.511999-394.239409-124.415813-473.59929-315.903526-79.359881-191.487713-35.839946-411.647383 110.591835-558.079163 146.43178-146.43178 367.103449-190.463714 558.079162-110.591834 191.487713 79.359881 315.903526 266.239601 315.903527 473.599289 0 282.111577-228.351657 510.463234-510.975234 510.975234z m112.639831-738.814892l-15.871976 2.047997c-9.727985 2.047997-19.455971 5.119992-28.671957 8.703987-36.351945 15.871976-63.487905 48.127928-72.703891 86.52787-5.119992 19.96797-5.119992 40.959939 0 60.41591-19.455971 0-38.911942-2.559996-57.343914-7.679989-57.343914-12.799981-111.103833-38.911942-156.671765-76.287885-13.823979-10.751984-26.62396-23.551965-37.887943-37.375944-4.095994-4.095994-8.191988-8.703987-11.775983-13.82398-6.143991 10.751984-10.751984 22.015967-13.823979 33.279951-9.727985 41.471938 1.023998 84.991873 28.671957 117.247824 6.65599 8.191988 16.895975 13.31198 23.551965 20.479969-5.631992 1.023998-11.775982 0.511999-17.407974-1.535998-9.215986-1.535998-18.431972-4.095994-27.135959-7.679988l-13.82398-5.119993c-1.535998 45.055932 21.503968 87.551869 60.41591 110.591835 12.287982 9.215986 26.62396 14.847978 41.983937 16.895974-8.191988 7.167989-44.543933 4.095994-57.343914 2.559996 12.799981 38.911942 43.007935 69.119896 81.407878 82.431877 12.287982 4.607993 25.087962 6.65599 37.887943 6.65599-10.751984 9.215986-22.527966 16.383975-34.815948 22.527966-24.063964 13.31198-50.175925 22.527966-76.799885 28.159958-11.775982 2.559996-24.063964 2.047997-37.375944 4.095994-13.823979 1.023998-27.135959 0.511999-40.959938-1.535998l11.263983 6.65599c11.775982 7.167989 23.551965 13.31198 36.351945 18.431972 24.575963 10.239985 49.663926 18.431972 75.263887 24.575963 60.415909 12.799981 123.391815 10.751984 182.783726-6.14399 134.143799-41.983937 219.135671-140.28779 251.391623-285.183573 5.119992-27.135959 7.167989-55.295917 6.143991-82.943875l20.479969-16.895975c16.895975-14.335978 31.743952-31.231953 43.519935-50.175925-23.039965 10.239985-47.615929 16.895975-72.703891 19.96797 5.119992-2.559996 9.727985-6.143991 14.335979-10.239984 19.455971-15.871976 33.791949-36.863945 41.471937-60.41591l-15.871976 8.703987c-20.991969 11.263983-43.519935 18.431972-66.5599 22.015967-26.111961-27.647959-62.975906-42.495936-100.863849-40.447939v0.511999h-0.511999z"
                                            fill="#2FB0EC" p-id="5147"></path>
                                    </svg>
                                    <svg t="1612600403846" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="5962" width="20" height="20">
                                        <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z"
                                            fill="#449522" p-id="5963"></path>
                                        <path
                                            d="M635.904 411.1104h3.84C620.2112 322.944 531.1488 256.256 424.2688 256.256 303.104 256.256 204.8 341.888 204.8 447.5904c0 61.44 33.2288 116.1216 84.864 151.0912l-21.7088 66.432 76.4672-39.04-1.4592-0.7424a248.1152 248.1152 0 0 0 100.6592 12.8512 155.6736 155.6736 0 0 1-8.96-51.7632c0-96.7168 90.112-175.3088 201.2672-175.3088zM495.1808 363.264c16.1536 0 29.2096 11.8272 29.2096 26.368 0 11.264-7.8336 20.9152-18.8928 24.6528-3.1744 1.1264-6.656 1.6896-10.3168 1.6896-16.128 0-29.184-11.8016-29.184-26.368 0-14.5152 13.1328-26.3424 29.184-26.3424zM364.6976 414.3872a30.976 30.976 0 0 1-10.3168 1.6896c-16.1536 0-29.184-11.8016-29.184-26.368 0-14.5152 13.0304-26.3424 29.184-26.3424 16.128 0 29.184 11.8272 29.184 26.368 0 11.264-7.8336 20.9152-18.8672 24.6528z"
                                            fill="#FFFFFF" p-id="5964"></path>
                                        <path
                                            d="M819.2 602.5472C819.2 510.1824 738.9696 435.2 640 435.2s-179.2 74.88-179.2 167.3472 80.2304 167.3216 179.2 167.3216a190.976 190.976 0 0 0 63.1808-10.6752L760.1664 793.6l-15.36-55.424C789.8624 707.84 819.2 658.3552 819.2 602.5472z m-227.072-30.464a23.424 23.424 0 0 1-8.32 1.4848c-13.0816 0-23.68-10.3168-23.68-22.9632 0-12.6208 10.5984-22.9376 23.68-22.9376 13.056 0 23.68 10.3168 23.68 22.9376 0 9.8304-6.3744 18.176-15.36 21.504z m115.9936 0a23.3984 23.3984 0 0 1-8.2944 1.4848c-13.0816 0-23.68-10.3168-23.68-22.9632 0-12.6208 10.5984-22.9376 23.68-22.9376 13.056 0 23.68 10.3168 23.68 22.9376 0 9.8304-6.3744 18.176-15.36 21.504z"
                                            fill="#FFFFFF" p-id="5965"></path>
                                    </svg>
                                    <svg t="1612600419970" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="6773" width="20" height="20">
                                        <path
                                            d="M512 489.984m-431.616 0a431.616 431.616 0 1 0 863.232 0 431.616 431.616 0 1 0-863.232 0Z"
                                            fill="#FFFFFF" p-id="6774"></path>
                                        <path
                                            d="M512 0C229.376 0 0 229.376 0 512s229.376 512 512 512 512-229.376 512-512S794.624 0 512 0zM363.52 775.168H245.248v-394.24H363.52v394.24z m432.64 0h-118.784v-209.408c0-54.272-18.944-81.92-57.344-81.92-31.232 0-50.688 15.872-59.392 45.568v245.76H441.856s1.536-354.304 0-394.24h92.672l7.168 78.336h1.536c24.576-39.936 62.976-66.048 116.736-66.048 39.936 0 73.216 10.24 97.792 39.936 24.576 27.648 38.4 66.048 38.4 118.784v223.232zM365.568 283.136c0 33.28-27.648 59.392-60.928 59.392s-60.928-26.112-60.928-59.392S271.36 223.744 304.64 223.744c32.768 0 60.928 26.112 60.928 59.392z"
                                            fill="#01577E" p-id="6775"></path>
                                    </svg>
                                    <svg t="1612600540230" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="8470" width="20" height="20">
                                        <path d="M512 512m-499 0a499 499 0 1 0 998 0 499 499 0 1 0-998 0Z"
                                            fill="#f35d5d" p-id="8471"></path>
                                        <path
                                            d="M475.4 796.7c-171.1 0-309.9-90.9-309.9-203.1 0-112.1 207.8-289.2 287.3-289.2 33.3 0 98.7 25.2 53 105.2-3.2 5.6 103.2-46.5 161.4-12.2 58.2 34.2 0 89.3 0 95.4 0 6.1 116.8 6.1 116.8 100.9-0.1 112.1-137.5 203-308.6 203z"
                                            fill="#fff" p-id="8472"></path>
                                        <path
                                            d="M718.9 381.5c-19.3-23.2-58.9-17.8-58.9-17.8-8.3 0.2-14.7-5.8-14.7-13.8v-5.7c0-8 6.4-15.5 14.3-16.7 0 0 47.2-12 83.3 21 36.1 33 20.6 93.3 20.6 93.3-1.3 8.1-9.1 14.4-17.1 14.4h-13.1c-7.9 0-12.6-6.2-10.3-13.8 0.1-0.1 15.1-37.7-4.1-60.9z"
                                            fill="#fff" p-id="8473"></path>
                                        <path
                                            d="M855.2 460.2c-1.3 12-12.5 21.6-24.5 21.6h-9.3c-12.1 0-20.4-9.6-18.6-21.5 0 0 17.2-72.7-22.6-130.6-39.7-57.9-133-48-133-48-12.3 0.2-22-9-22-21V250c0-12.1 9.7-22 21.6-22.2 0 0 97.2-8.9 163.4 54.7 66.4 63.5 45 177.7 45 177.7z"
                                            fill="#fff" p-id="8474"></path>
                                        <path
                                            d="M447 473.1c-109.3 15.4-189.7 86.3-179.6 158.5 10.1 72.2 107 118.2 216.3 102.9 109.4-15.4 189.8-86.3 179.6-158.5-10.1-72.2-107-118.3-216.3-102.9z"
                                            fill="#f35d5d" p-id="8475"></path>
                                        <path
                                            d="M463.5 714.8c-65 12.6-126.4-21.7-137.1-76.8-10.7-55 33.3-109.9 98.4-122.5 65-12.6 126.4 21.7 137.1 76.8 10.7 55-33.3 109.9-98.4 122.5z"
                                            fill="#fff" p-id="8476"></path>
                                        <path
                                            d="M393.7 605.1c-20 9.3-30.5 29.3-23.4 44.5 7.1 15.2 29.1 20 49.1 10.7s30.5-29.3 23.4-44.5c-7.1-15.3-29.1-20.1-49.1-10.7zM465.4 573.3c-11 0-20 9.1-20 20.3 0 11.2 8.9 20.3 20 20.3 11 0 20-9.1 20-20.3 0-11.2-9-20.3-20-20.3z"
                                            fill="#f35d5d" p-id="8477"></path>
                                    </svg>
                                    <svg t="1612600485137" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="7571" width="20" height="20">
                                        <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z"
                                            fill="#0BD078" p-id="7572"></path>
                                        <path
                                            d="M525.909333 839.111111c172.999111-0.042667 313.258667-140.188444 313.457778-313.173333a21.020444 21.020444 0 1 0-42.040889 0c0.128 149.575111-121.031111 270.933333-270.606222 271.047111-149.560889 0.142222-270.933333-121.031111-271.047111-270.592-0.142222-149.575111 121.031111-270.933333 270.592-271.061333h0.241778a21.006222 21.006222 0 0 0 0-41.998223C353.706667 213.176889 213.475556 353.123556 213.333333 525.909333c-0.156444 172.8 139.790222 313.002667 312.576 313.173334V839.111111z m134.997334-479.672889c-122.794667 0-175.402667 62.976-175.402667 211.470222v3.043556a21.162667 21.162667 0 0 0 42.168889-3.043556c0-125.155556 34.844444-169.272889 133.859555-169.272888h49.521778l-18.346666 18.346666a21.162667 21.162667 0 1 0 29.923555 29.923556l47.672889-47.672889a31.288889 31.288889 0 0 0 0-43.377778L722.631111 311.182222a21.006222 21.006222 0 0 0-29.340444 29.952l16.497777 18.346667H660.906667v-0.042667z"
                                            fill="#FFFFFF" p-id="7573"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="title">
                                    AOK-315WiNS
                                    <el-popover placement="bottom" title="Scan code" width="200" trigger="click">
                                        <img style="width: 100%;" src="images/微信图片_20210206161442.png" alt="">
                                        <span slot="reference" style="cursor:pointer;">
                                            <svg t="1612599552615" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg" p-id="1593" width="20" height="20">
                                                <path
                                                    d="M742.8 121.5c-2.3 0.3-4.7 0.1-7 0.1-38 0-76-0.1-114 0.1-11 0-21.9 1.4-32.4 5.1-18.6 6.5-29.8 19.5-34.4 38.4-1.7 7-2.4 14.1-2.4 21.3 0 67.2-0.1 134.3 0.1 201.5 0 13.8 0.9 27.6 6.2 40.8 6.9 17.1 19.7 27.2 37.3 31.7 6.3 1.6 12.8 2.2 19.3 2.2h218c8.3 0 16.6-0.7 24.8-2.3 24.4-4.5 40.4-20.7 44.9-45 0.4-2.2-0.4-5.2 2.9-6.2v-232c-0.4-0.4-0.5-0.9-0.5-1.5-1.5-4.8-1.7-9.8-3.3-14.7-7.1-21-21.7-33.4-42.8-38.8-6.4-1.6-12.8-2.4-19.5-2.1-1.3 0.1-3 1-3.9-0.9h-89c-0.4 2.6-2.7 2.1-4.3 2.3z m98.7 40.7c4 0 8.1 0.9 11.9 2.1 6.9 2.2 10.7 7.6 10.7 15.1 0 74.8 0.1 149.6-0.1 224.4 0 11.2-8.6 18-21.1 18.1-38.2 0.3-76.3 0.1-114.5 0.1h-113c-4.5 0-8.6-1.3-12.7-2.7-8.5-3.1-9.6-10.5-9.7-17.9-0.2-37.5-0.1-75-0.1-112.5V183.4c0-6.5 1.5-12.5 6.9-17 4.6-3.8 10.3-4.3 15.6-4.3 75.4-0.1 150.8 0 226.1 0.1z"
                                                    fill="#2c2c2c" p-id="1594"></path>
                                                <path
                                                    d="M742 120c-39.5 0.1-79 0.1-118.4 0.1-9.4 0-18.6 1-27.7 3.1-11.6 2.7-22.1 7.7-30 16.7-10.6 12.1-14.8 26.9-14.8 42.6-0.2 69.6-0.2 139.3 0 208.9 0 9.1 0.7 18.3 2.8 27.2 2.8 11.7 7.6 22.5 16.7 30.5 11.7 10.3 25.9 15 41.5 15 74.1 0.1 148.3 0.1 222.4 0 9.3 0 18.7-0.5 27.7-3 19-5.4 33.6-15.9 40-35.8 1.7-5.3 1.8-10.9 3.8-16.1-3.2 1-2.5 4-2.9 6.2-4.5 24.4-20.5 40.5-44.9 45-8.2 1.5-16.5 2.3-24.8 2.3h-218c-6.5 0-13-0.6-19.3-2.2-17.5-4.5-30.4-14.6-37.3-31.7-5.3-13.1-6.2-27-6.2-40.8-0.2-67.2-0.1-134.3-0.1-201.5 0-7.2 0.7-14.3 2.4-21.3 4.6-18.9 15.8-31.9 34.4-38.4 10.5-3.7 21.4-5 32.4-5.1 38-0.2 76-0.1 114-0.1 2.3 0 4.7 0.2 7-0.1 1.7-0.2 3.9 0.2 4.2-2.4-1.2 2.1-3.2 0.9-4.9 0.9zM120.6 410.3c2 12.5 5.5 24.4 14.3 34 11.5 12.7 26.5 18 43 18.1 75.1 0.3 150.2 0.3 225.4 0 9.4 0 18.9-1 28.1-3.9 24.5-7.7 39.1-27.3 39.1-53.1 0-74 0-147.9 0.1-221.9 0-6.4-0.8-12.6-2.4-18.8-5.8-22.4-24.5-39.1-47.5-42.3-4.1-0.6-8.2-1.1-12.4-1.1-2 0-4.5 0.6-5.2-2.4h-89c-1.3 2.1-3.3 0.9-4.9 0.9-41.1 0.1-82.2-0.2-123.3 0.2-14.8 0.1-29.2 2.6-42.2 10.7-12.5 7.8-19.8 19.1-23.7 33-0.8 2.7-0.2 5.7-1.9 8.2v233c2.9 0.9 2.2 3.5 2.5 5.4z m39.5-231c0-8.1 6.2-14.6 14.5-16.3 4.4-0.9 8.8-1 13.2-1h219c4.3 0 8.4 0.8 12.4 2 7.5 2.4 10.8 6.9 10.8 14.6v225.5c0 8.2-3.8 13.3-11.6 15.9-4 1.3-8.1 2.1-12.4 2-37.2-0.1-74.3-0.1-111.5-0.1-37.7 0-75.3 0.1-113-0.1-6.3 0-12.6-0.9-17.3-6.1-2.7-3-4.1-6.3-4.1-10.1-0.1-75.3-0.1-150.8 0-226.3z"
                                                    fill="#2c2c2c" p-id="1595"></path>
                                                <path
                                                    d="M119 407.5c0.1 8.9 2.6 17.3 6.4 25.1 10.4 21.4 28.9 31 51.6 31.2 74.5 0.6 149 0.2 223.4 0.2 9.3 0 18.6-0.8 27.7-3 27.1-6.7 43.6-26.4 43.8-54.4 0.5-73.8 0.2-147.6 0.2-221.4 0-4.9 0-9.8-0.9-14.7-3-16.2-10.7-29.4-24.2-39-11-7.8-23.5-11-36.9-11.4-2.3-0.1-4.9 1.2-6.9-0.9 0.7 3 3.3 2.4 5.2 2.4 4.2 0 8.3 0.6 12.4 1.1 23 3.2 41.7 19.9 47.5 42.3 1.6 6.2 2.4 12.4 2.4 18.8-0.1 74 0 147.9-0.1 221.9 0 25.7-14.6 45.3-39.1 53.1-9.2 2.9-18.7 3.9-28.1 3.9-75.1 0.2-150.2 0.3-225.4 0-16.5-0.1-31.4-5.4-43-18.1-8.8-9.7-12.3-21.5-14.3-34-0.3-1.9 0.4-4.6-2.6-5.2 1.3 0.1 0.9 1.3 0.9 2.1zM191.8 882.7c2.1-0.3 4.3-0.1 6.5-0.1h206c8.4 0 16.6-1 24.7-3.1 25.5-6.6 41.4-26.9 41.5-53.2 0.1-25.3 0-50.7 0-76v-148c0-32.3-21.4-56.2-53.6-59.7-11.4-1.2-22.9-1.7-34.4-2-34.5-0.7-69 0.5-103.4 1.3-33 0.8-66 0.2-98.9 0.7-11.5 0.2-22.6 2.7-32.7 8.1-13.6 7.2-21.9 18.5-25.7 33.4-0.7 2.8-0.1 6.5-3.7 8v234c2 5.5 2.2 11.4 3.9 17.1 5.9 20.7 19.4 33.3 39.8 38.9 6.5 1.8 13.2 2.3 19.9 2.1 1.4 0 3.3-1.1 4.4 0.9h2c0.2-2.3 2.1-2.2 3.7-2.4z m-11.4-40.6c-12.2 0-20.7-6.6-20.6-20.5 0.4-73.3 0.2-146.6 0.1-220 0-11.8 7-18.1 18.3-18.5 74.6-2.4 149.1-0.5 223.7-0.8 6.4 0 13.4-0.4 19.6 3 5.4 3 8.5 7.2 8.5 13.7-0.1 37.5 0 75 0 112.5 0 37.2-0.2 74.3 0.1 111.5 0.1 12.1-7.8 17.6-18.7 19.3-8.6 1.3-17 0-25.5-0.1-68.5-0.2-137-0.1-205.5-0.1z"
                                                    fill="#2c2c2c" p-id="1596"></path>
                                                <path
                                                    d="M193.5 884.2c67.8-0.1 135.7-0.1 203.5 0 9.4 0 18.7-0.2 28-2.1 12.5-2.5 23.8-7.8 32.5-17.1 9.7-10.4 14.5-23.4 14.5-37.6 0.2-74.3 0.1-148.7 0.1-223 0-6.3-0.4-12.4-2-18.5-5.3-19.9-17.3-33.7-36.7-41.3-13.3-5.2-27.3-5-41-5.3-23.1-0.5-46.2-0.9-69.3 0.5-19 1.2-38.2 0.3-57.3 1-27.6 0.9-55.3 0.3-83 0.2-6.4 0-12.7 0.6-19 2-18.4 4.2-32.5 13.8-40.6 31.3-2.6 5.7-2.8 12-5.2 17.7 3.7-1.5 3-5.2 3.7-8 3.8-14.9 12.2-26.2 25.7-33.4 10.2-5.4 21.2-7.9 32.7-8.1 33-0.5 65.9 0.1 98.9-0.7 34.5-0.8 68.9-2 103.4-1.3 11.5 0.2 23 0.7 34.4 2 32.2 3.5 53.5 27.4 53.6 59.7v148c0 25.3 0.1 50.7 0 76-0.2 26.4-16 46.6-41.5 53.2-8.1 2.1-16.3 3.1-24.7 3.1h-206c-2.2 0-4.3-0.1-6.5 0.1-1.6 0.2-3.5 0-3.7 2.4 1.5-1.9 3.7-0.8 5.5-0.8z"
                                                    fill="#2c2c2c" p-id="1597"></path>
                                                <path
                                                    d="M143.6 130.9c13-8 27.4-10.6 42.2-10.7 41.1-0.4 82.2-0.1 123.3-0.2 1.6 0 3.6 1.2 4.9-0.9-1.7 1-3.6 0.5-5.4 0.5-44.8 0.3-89.6-0.8-134.4 0.6-18.9 0.6-34.9 8.1-46.5 23.6-6.3 8.4-9.1 18-9.7 28.3 1.8-2.4 1.2-5.4 1.9-8.2 4-13.9 11.2-25.2 23.7-33zM840 120c6.6-0.3 13.1 0.5 19.5 2.1 21 5.4 35.7 17.8 42.8 38.8 1.6 4.8 1.8 9.9 3.3 14.7v-0.4c0.4-28.1-24.4-53.2-52.7-55.3-5.6-0.4-11.2 0.5-16.8-0.9 0.8 2.1 2.6 1.1 3.9 1zM181.6 884.2c-6.7 0.2-13.4-0.3-19.9-2.1-20.4-5.6-33.9-18.2-39.8-38.9-1.6-5.7-1.8-11.6-3.9-17.1 1.1 5.3 0.8 10.8 2.1 16.1 5.5 22.8 25.5 40.6 48.6 42 5.8 0.4 11.6-0.6 17.3 0.8-1.1-1.9-3-0.9-4.4-0.8z"
                                                    fill="#2c2c2c" p-id="1598"></path>
                                                <path
                                                    d="M608.4 667.2c-12.3 0.2-20.4 8.3-20.4 20V859c0 12.3 8.5 20.1 20.8 19.9 12.9-0.2 21-6.9 21.1-19.7 0.2-57.4 0.1-114.9 0-172.3 0-12-8.4-19.9-21.5-19.7zM861.4 667.4c-9.9-1.8-23.3 4.9-23.3 18.2-0.2 29.2 0 58.3 0 87.5v87c0 1.6-0.1 3.4 0.4 4.9 3.3 9.4 14.4 16.2 23.5 14 11.4-2.7 17.9-7.2 18-21.4 0.2-55.5 0.1-111 0.1-166.5-0.1-14.4-4.6-21.1-18.7-23.7zM768.7 727.3c-2.6-9.4-13-16.8-22.1-15.1-12.4 2.4-19.4 6.6-19.5 20.9-0.3 41.1-0.1 82.3-0.1 123.4 0 13.8 5.7 20 17.5 22.2 11.1 2.1 24.4-4.5 24.5-19.1v-63.5-64.5c0-1.3 0-2.9-0.3-4.3zM741 544.8c-8.7 1.9-14 10.2-14 19.8V653c0 13.1 4 21 18.1 23.7 10.3 1.9 24-5.2 23.9-18.5-0.1-15.8 0-31.6 0-47.5 0-15.3-0.2-30.6 0-46 0.3-19-14.6-22.8-28-19.9zM622 547.4c-4.9-3.4-10.1-3.3-15.4-3.3-10.5 0-18.5 7.9-18.5 18.3v26c0 9-0.1 18 0 27 0.1 4.6 1.3 8.7 4.9 12.3 5.2 5.2 11.2 6.7 18.2 6.5 9.9-0.3 18.8-8.9 18.8-18.7 0.1-17.7 0.2-35.3-0.1-53 0-6.1-2.4-11.3-7.9-15.1zM878.3 555.9c-2.2-6.2-9.8-11.8-17.9-12-14.3-0.5-23.6 7.9-22.5 22.8 0.5 7 0.1 14 0.1 21v25c0 1.5 0 3 0.4 4.4 3.2 10.3 12.9 15.5 23.9 14 11-1.6 17.4-8.4 17.6-19.7 0.3-15.8 0.1-31.7 0.1-47.5 0-2.9-0.8-5.5-1.7-8zM352 257.8c-1.9-7.3-7.9-12.7-15.4-13.7-1.3-0.2-2.7-0.4-4-0.4-0.6 0-1.5 0.2-1.7-0.8h-28.8c-0.4 0.7-1.1 0.3-1.6 0.3-13.3 0-26.6-0.1-39.9 0.1-4.8 0-9.5 0.9-13.7 3.5-4.1 2.5-6.4 6.2-7.7 10.7-0.2 0.9 0 1.9-0.6 2.6v75.5c1 0.2 0.7 1.1 0.8 1.7 0.7 4.1 1.8 7.9 4.6 11 3.7 4.1 8.6 5.8 13.9 5.9 24.3 0.1 48.7 0.1 73 0 3.1 0 6.1-0.3 9.1-1.3 7.9-2.5 12.7-8.9 12.7-17.2v-71.9c0.1-2-0.2-4-0.7-6zM785.5 250.1c-1.9-7.3-7.9-12.7-15.4-13.7-1.3-0.2-2.7-0.4-4-0.4-0.6 0-1.5 0.2-1.7-0.8h-28.8c-0.4 0.7-1.1 0.3-1.6 0.3-13.3 0-26.6-0.1-39.9 0.1-4.8 0-9.5 0.9-13.7 3.5-4.1 2.5-6.4 6.2-7.7 10.7-0.2 0.9 0 1.9-0.6 2.6v75.5c1 0.2 0.7 1.1 0.8 1.7 0.7 4.1 1.8 7.9 4.6 11 3.7 4.1 8.6 5.8 13.9 5.9 24.3 0.1 48.7 0.1 73 0 3.1 0 6.1-0.3 9.1-1.3 7.9-2.5 12.7-8.9 12.7-17.2v-71.9c0.2-2-0.2-4.1-0.7-6zM351.4 676.6c-1.9-7.3-7.9-12.7-15.4-13.7-1.3-0.2-2.7-0.4-4-0.4-0.6 0-1.5 0.2-1.7-0.8h-28.8c-0.4 0.7-1.1 0.3-1.6 0.3-13.3 0-26.6-0.1-39.9 0.1-4.8 0-9.5 0.9-13.7 3.5-4.1 2.5-6.4 6.2-7.7 10.7-0.2 0.9 0 1.9-0.6 2.6v75.5c1 0.2 0.7 1.1 0.8 1.7 0.7 4.1 1.8 7.9 4.6 11 3.7 4.1 8.6 5.8 13.9 5.9 24.3 0.1 48.7 0.1 73 0 3.1 0 6.1-0.3 9.1-1.3 7.9-2.5 12.7-8.9 12.7-17.2v-71.9c0.1-2-0.2-4-0.7-6z"
                                                    fill="#2c2c2c" p-id="1599"></path>
                                            </svg>
                                        </span>
                                    </el-popover>
                                </div>
                                <div class="describe">
                                    {{ prijectDetail.describe }}
                                </div>
                                <div class="quantity">
                                    Quantity:<el-input-number style="margin-left: 20px;"
                                        v-model="prijectDetail.quantity" :step="1"></el-input-number>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-bottom: 300px;">
                            <div class="detailedTop">
                                <div class="item" v-for="(item,index) in detailedTop">
                                    {{item.name}} : {{item.value}}
                                </div>
                            </div>
                            <el-tabs type="border-card">
                                <el-tab-pane :label="prijectDetail.productDesription.title">
                                    <div class="htmlDescStyle" v-html="prijectDetail.productDesription.htmlDesc"></div>
                                </el-tab-pane>
                                <el-tab-pane :label="specSheets.title">
                                    <div>【File Download】</div>
                                    <div v-for="(item,index) in specSheets.fileList" :key="index">
                                        <a :href="item.fileUrl" :download="item.fileName" target="_black">
                                            <svg t="1612609165289" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg" p-id="2160" width="20" height="20">
                                                <path
                                                    d="M905.6 304h-224c-12.8 0-25.6-3.2-32-12.8-9.6-9.6-16-22.4-16-35.2V32l272 272z"
                                                    fill="#FFFFFF" opacity=".5" p-id="2161"></path>
                                                <path
                                                    d="M486.4 403.2h-3.2-3.2c-3.2 19.2 0 41.6 6.4 57.6 6.4-16 6.4-38.4 0-57.6zM332.8 748.8h3.2c16-6.4 28.8-16 38.4-32-16 6.4-28.8 16-41.6 32z"
                                                    fill="#EA4318" p-id="2162"></path>
                                                <path
                                                    d="M633.6 32h-480c-9.6 0-22.4 6.4-32 16-9.6 9.6-12.8 22.4-12.8 32v864c0 12.8 3.2 25.6 12.8 32 9.6 9.6 22.4 16 32 16h704c12.8 0 25.6-6.4 32-16 9.6-9.6 16-22.4 16-32v-640L633.6 32z m22.4 646.4c-32-3.2-60.8-12.8-86.4-35.2-48 9.6-92.8 25.6-137.6 44.8-35.2 64-70.4 96-99.2 96-6.4 0-12.8 0-16-3.2-12.8-6.4-19.2-19.2-19.2-32 0-9.6 3.2-38.4 112-86.4 25.6-44.8 44.8-92.8 60.8-144-12.8-28.8-44.8-96-22.4-131.2 6.4-12.8 19.2-19.2 35.2-19.2 12.8 0 22.4 6.4 28.8 16 16 19.2 12.8 64-6.4 128 19.2 35.2 41.6 67.2 70.4 92.8 25.6-3.2 48-9.6 73.6-9.6 54.4 0 60.8 25.6 60.8 41.6 3.2 41.6-35.2 41.6-54.4 41.6z"
                                                    fill="#EA4318" p-id="2163"></path>
                                                <path
                                                    d="M496 569.6c-12.8 28.8-25.6 54.4-38.4 80h3.2v3.2c25.6-9.6 54.4-16 76.8-22.4h3.2c-16-19.2-32-38.4-44.8-60.8zM652.8 630.4c-9.6 0-19.2 0-28.8 3.2 12.8 6.4 22.4 9.6 35.2 9.6 9.6 0 16 0 22.4-3.2-3.2-3.2-6.4-9.6-28.8-9.6z"
                                                    fill="#EA4318" p-id="2164"></path>
                                                <path
                                                    d="M905.6 304h-224c-12.8 0-25.6-3.2-32-12.8-9.6-9.6-16-22.4-16-35.2V32l272 272z"
                                                    fill="#FFFFFF" opacity=".5" p-id="2165"></path>
                                            </svg>{{ item.fileName }}
                                        </a>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane :label="prijectDetail.paramrter.title" v-if="prijectDetail.paramrter">
                                    <div v-html="prijectDetail.paramrter.htmlDesc"></div>
                                </el-tab-pane>
                                <el-tab-pane :label="iesFiles.title">
                                    <div v-for="(item,index) in iesFiles.fileList" :key="index">
                                        <a :href="item.fileUrl" :download="item.fileName" target="_black">
                                            <svg t="1612609609849" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg" p-id="4391" width="20" height="20">
                                                <path
                                                    d="M880.593875 563.64660938c46.4709375 39.18860156 74.04180469 86.99132812 82.68426562 143.43651562 8.614125 56.47352344-3.68367188 110.22679688-36.86505468 161.4015-35.19323437 49.13451562-80.87076563 80.19070312-136.97592188 93.14022656-56.10515625 12.94952344-110.73684375 4.81710938-163.86672656-24.42557812a26.63578125 26.63578125 0 0 1-9.97425 1.98351562H197.21607031c-31.22620312-0.65172656-57.12525-11.1076875-77.72547656-31.36788281-20.57189062-20.26019531-31.53789844-45.64919531-32.8696875-76.22367188V196.07282813c1.33178906-30.54614062 12.29779687-55.93514063 32.8696875-76.22367188C140.09082031 99.61729687 166.01820313 89.16133594 197.21607031 88.48127344h468.19469531l215.18310938 215.18310937v260.0105625z m-97.61730469-276.95545313l-129.49523437-129.49523438v59.78882813c0.65172656 19.92016406 7.62236719 36.4966875 20.88358593 49.78624219 13.31789063 13.28955469 29.89441406 19.92016406 49.81457813 19.92016406h58.79707031z m-43.83569531 623.6173125a166.50196875 166.50196875 0 0 0 84.66778125-22.38539063 165.93525 165.93525 0 0 0 61.77234375-62.28239062c15.27307031-26.57910937 22.8954375-54.80170312 22.8954375-84.66778125 0-29.89441406-7.65070312-58.28702344-22.8954375-85.17782813a164.91515625 164.91515625 0 0 0-61.77234375-62.76410156 166.50196875 166.50196875 0 0 0-84.66778125-22.41372656c-48.48278906 1.33178906-88.69148438 17.93664844-120.54107813 49.81457812-31.87792969 31.87792969-48.48278906 72.05828906-49.81457812 120.54107813 1.33178906 47.80272656 17.93664844 87.64305469 49.81457812 119.52098437s72.05828906 48.48278906 120.54107813 49.81457813z m84.66778125-379.53154688v-187.30054687h-99.62915625c-35.84496094-0.65172656-65.739375-12.94952344-89.65490625-36.83671875-23.91553125-23.91553125-36.52502344-53.80994531-37.8568125-89.68324219v-71.68992187H197.21607031c-15.30140625 0.65172656-27.91089844 5.78053125-37.8568125 15.41475-9.97425 9.63421875-15.30140625 21.42196875-15.95313281 35.36325v635.57507812c0.6800625 13.94128125 5.97888281 25.72903125 15.95313281 35.36325 9.94591406 9.63421875 22.58374219 14.76302344 37.8568125 15.44308594h364.59850782c-32.55799219-41.85217969-49.16285156-87.84140625-49.81457813-137.99601562-0.65172656-50.12627344 14.2813125-96.45553125 44.82745312-138.9594375 31.87792969-41.82384375 72.05828906-69.56472656 120.54107813-83.16597657 48.45445313-13.60125 97.30560938-10.79599219 146.440125 8.47244532z m-55.9918125 201.63853126v96.73889062a28.3359375 28.3359375 0 0 1-56.671875 0v-96.73889063l-31.73625 31.79292188a28.3359375 28.3359375 0 1 1-40.09535156-40.09535156l80.13403125-80.13403125a28.3359375 28.3359375 0 0 1 40.09535156 0l80.13403125 80.13403125a28.3359375 28.3359375 0 1 1-40.06701563 40.09535156l-31.79292187-31.79292188zM256.9765625 286.69115625h282.906c8.64246094 0.6800625 15.61310156 3.68367188 20.94025781 8.98249219a27.03248437 27.03248437 0 0 1 7.9340625 19.92016406 27.03248437 27.03248437 0 0 1-7.9340625 19.92016406c-5.32715625 5.32715625-12.29779687 7.96239844-20.94025781 7.96239844H256.9765625a27.03248437 27.03248437 0 0 1-19.92016406-7.96239844 27.03248437 27.03248437 0 0 1-7.96239844-19.92016406c0-7.96239844 2.63524219-14.62134375 7.9340625-19.92016406 5.32715625-5.32715625 11.98610156-8.30242969 19.9485-8.98249219z m0 142.47309375h282.906c8.64246094 0 15.61310156 2.63524219 20.94025781 7.96239844a27.03248437 27.03248437 0 0 1 7.9340625 19.92016406 27.03248437 27.03248437 0 0 1-7.9340625 19.92016406c-5.32715625 5.32715625-12.29779687 8.30242969-20.94025781 8.98249219H256.9765625a30.85783594 30.85783594 0 0 1-19.92016406-8.98249219 27.03248437 27.03248437 0 0 1-7.96239844-19.92016406c0-7.96239844 2.63524219-14.62134375 7.9340625-19.92016406A27.03248437 27.03248437 0 0 1 256.9765625 429.16425z m0 141.453h170.35565625c7.96239844 0 14.59300781 2.66357812 19.92016406 7.96239844a27.03248437 27.03248437 0 0 1 7.96239844 19.92016406 27.03248437 27.03248437 0 0 1-7.96239844 19.92016406 30.85783594 30.85783594 0 0 1-19.92016406 8.98249219H256.9765625a30.85783594 30.85783594 0 0 1-19.92016406-8.98249219 27.03248437 27.03248437 0 0 1-7.96239844-19.92016406c0-7.96239844 2.63524219-14.59300781 7.9340625-19.92016406A27.03248437 27.03248437 0 0 1 256.9765625 570.61725z"
                                                    p-id="4392" fill="#1296db"></path>
                                            </svg>{{ item.fileName }}
                                        </a>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane :label="certification.title">
                                    <div>【File Download】</div>
                                    <div v-for="(item,index) in certification.fileList" :key="index">
                                        <a :href="item.fileUrl" :download="item.fileName" target="_black">
                                            <svg t="1612609165289" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                                xmlns="http://www.w3.org/2000/svg" p-id="2160" width="20" height="20">
                                                <path
                                                    d="M905.6 304h-224c-12.8 0-25.6-3.2-32-12.8-9.6-9.6-16-22.4-16-35.2V32l272 272z"
                                                    fill="#FFFFFF" opacity=".5" p-id="2161"></path>
                                                <path
                                                    d="M486.4 403.2h-3.2-3.2c-3.2 19.2 0 41.6 6.4 57.6 6.4-16 6.4-38.4 0-57.6zM332.8 748.8h3.2c16-6.4 28.8-16 38.4-32-16 6.4-28.8 16-41.6 32z"
                                                    fill="#EA4318" p-id="2162"></path>
                                                <path
                                                    d="M633.6 32h-480c-9.6 0-22.4 6.4-32 16-9.6 9.6-12.8 22.4-12.8 32v864c0 12.8 3.2 25.6 12.8 32 9.6 9.6 22.4 16 32 16h704c12.8 0 25.6-6.4 32-16 9.6-9.6 16-22.4 16-32v-640L633.6 32z m22.4 646.4c-32-3.2-60.8-12.8-86.4-35.2-48 9.6-92.8 25.6-137.6 44.8-35.2 64-70.4 96-99.2 96-6.4 0-12.8 0-16-3.2-12.8-6.4-19.2-19.2-19.2-32 0-9.6 3.2-38.4 112-86.4 25.6-44.8 44.8-92.8 60.8-144-12.8-28.8-44.8-96-22.4-131.2 6.4-12.8 19.2-19.2 35.2-19.2 12.8 0 22.4 6.4 28.8 16 16 19.2 12.8 64-6.4 128 19.2 35.2 41.6 67.2 70.4 92.8 25.6-3.2 48-9.6 73.6-9.6 54.4 0 60.8 25.6 60.8 41.6 3.2 41.6-35.2 41.6-54.4 41.6z"
                                                    fill="#EA4318" p-id="2163"></path>
                                                <path
                                                    d="M496 569.6c-12.8 28.8-25.6 54.4-38.4 80h3.2v3.2c25.6-9.6 54.4-16 76.8-22.4h3.2c-16-19.2-32-38.4-44.8-60.8zM652.8 630.4c-9.6 0-19.2 0-28.8 3.2 12.8 6.4 22.4 9.6 35.2 9.6 9.6 0 16 0 22.4-3.2-3.2-3.2-6.4-9.6-28.8-9.6z"
                                                    fill="#EA4318" p-id="2164"></path>
                                                <path
                                                    d="M905.6 304h-224c-12.8 0-25.6-3.2-32-12.8-9.6-9.6-16-22.4-16-35.2V32l272 272z"
                                                    fill="#FFFFFF" opacity=".5" p-id="2165"></path>
                                            </svg>{{ item.fileName }}
                                        </a>
                                    </div>
                                </el-tab-pane>
                            </el-tabs>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="headerNav">
                <div class="item">
                    <div class="itemTitle">Quick Links</div>
                    <div v-for="(item,index) in quickLinks" :key="index">
                        <a href="#"><i class="el-icon-arrow-right"></i> {{item.name}}</a>
                        <el-divider></el-divider>
                    </div>
                </div>
                <div class="item">
                    <div class="itemTitle">Products & Projects</div>
                    <div v-for="(item,index) in productsProjects" :key="index">
                        <a href="#"><i class="el-icon-arrow-right"></i>{{item.name}}</a>
                        <el-divider></el-divider>
                    </div>
                </div>
                <div class="item">
                    <div class="itemTitle">Quick Links</div>
                    <div>
                        Email: wally@aokledlight.com <br>
                        General Manager: Wally (Yafeng Hei)<br>
                        Telephone:<br>
                        Shenzhen Factory: 0086-755-33274636<br>
                        Sales Manager: Journey<br>
                        Fuzhou Headquarter: 0086-591-83820886<br>
                        Sales Manager: Elaine<br>
                        USA Office Line：+1 （626）420 8777<br>
                        VP: Kathy Mason<br>
                        USA Warehouse: 18541 E Gale Ave, City of Industry, CA91748<br>
                    </div>
                </div>
            </div>
        </div>
        <div class="keepOnRecord">
            Copyright © XXXX-XXXX AOK All Rights Reserved.
        </div>
        <div class="sign">
            <img src="images/cert.png" alt="">
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- import Vue before Element -->
    <script src="js/vue2.6.11.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- import JavaScript -->
    <script src="js/ele-index.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data() {
                return {
                    // 公共部分---------------------------------------------
                    navShow: false,
                    dropdownShow: false,
                    screenWidth: '',
                    dropdownIndex: '',
                    defaultProps: {
                        children: 'children',
                        label: 'label'
                    },
                    options: [{
                        value: '选项1',
                        label: '黄金糕'
                    }, {
                        value: '选项2',
                        label: '双皮奶'
                    }, {
                        value: '选项3',
                        label: '蚵仔煎'
                    }, {
                        value: '选项4',
                        label: '龙须面'
                    }, {
                        value: '选项5',
                        label: '北京烤鸭'
                    }],
                    // 导航栏按钮父类型
                    dropdownList: [{
                            title: 'OUTDOOR LED OUTDOOR LED',
                            children: [{
                                name: 'Area Light'
                            }, {
                                name: 'Area Light'
                            }, {
                                name: 'Area Light'
                            }, {
                                name: 'Area Light'
                            }, ]
                        },
                        {
                            title: 'OUTDOOR LED OUTDOOR LED',
                            children: [{
                                name: 'Area '
                            }, {
                                name: 'Area '
                            }, {
                                name: 'Area '
                            }, {
                                name: 'Area '
                            }, ]
                        }
                    ],
                    // 导航栏按钮数据
                    btnList: [],
                    // 公共部分结束------------------------------------------
                    // 列表数据
                    data: [{
                        label: '一级 1',
                        children: [{
                            label: '二级 1-1',
                            children: [{
                                label: '三级 1-1-1'
                            }]
                        }]
                    }, {
                        label: '一级 2',
                        children: [{
                            label: '二级 2-1',
                            children: [{
                                label: '三级 2-1-1'
                            }]
                        }, {
                            label: '二级 2-2',
                            children: [{
                                label: '三级 2-2-1'
                            }]
                        }]
                    }, {
                        label: '一级 3',
                        children: [{
                            label: '二级 3-1',
                            children: [{
                                label: '三级 3-1-1'
                            }]
                        }, {
                            label: '二级 3-2',
                            children: [{
                                label: '三级 3-2-1'
                            }]
                        }]
                    }],
                    // 详情id,根据id查详情
                    id: '',
                    topStyle: {
                        transform: ''
                    },
                    r_img: {},
                    topShow: false,
                    rShow: false,
                    // 
                    /**
                     * 详情数据
                     * describe: 描述
                     * quantity: 数量
                     */
                    prijectDetail: {
                        describe: 'Up to 150LM/W, High performance LED flood light. 315W~720W available. A variety of flood distributions for lighting applications such as Stadium and Port.', //描述
                        quantity: '1', //数量
                        productDesription: {
                            type: "html",
                            title: 'Product Desription',
                            htmlDesc: '<div>这里是富文本1</div>'
                        },
                        paramrter: {
                            type: "html",
                            title: 'Paramrter',
                            htmlDesc: '<div>这里是富文本2</div>'
                        },

                    },
                    specSheets: {
                        type: "list",
                        title: 'Spec Sheets',
                        fileList: [{
                            fileName: 'Catalogue of AOK iP Series LED Street Light.pdf',
                            fileUrl: 'file/Catalogue of AOK iP Series LED Street Light.pdf'
                        }, {
                            fileName: 'Catalogue of AOK iP Series LED Street Light.pdf',
                            fileUrl: 'file/Catalogue of AOK iP Series LED Street Light.pdf'
                        }, {
                            fileName: 'Catalogue of AOK iP Series LED Street Light.pdf',
                            fileUrl: 'file/Catalogue of AOK iP Series LED Street Light.pdf'
                        }, {
                            fileName: 'Catalogue of AOK iP Series LED Street Light.pdf',
                            fileUrl: 'file/Catalogue of AOK iP Series LED Street Light.pdf'
                        }, ]
                    },
                    iesFiles: {
                        type: "list",
                        title: 'Ies Files',
                        fileList: [{
                            fileName: 'AOK-150WIP-NV-L3-00-5070-T401-P_IESNA2002.IES',
                            fileUrl: 'file/AOK-150WIP-NV-L3-00-5070-T401-P_IESNA2002.IES'
                        }, {
                            fileName: 'AOK-150WIP-NV-L3-00-5070-T401-P_IESNA2002.IES',
                            fileUrl: 'file/AOK-150WIP-NV-L3-00-5070-T401-P_IESNA2002.IES'
                        }, {
                            fileName: 'AOK-150WIP-NV-L3-00-5070-T401-P_IESNA2002.IES',
                            fileUrl: 'file/AOK-150WIP-NV-L3-00-5070-T401-P_IESNA2002.IES'
                        }, {
                            fileName: 'AOK-150WIP-NV-L3-00-5070-T401-P_IESNA2002.IES',
                            fileUrl: 'file/AOK-150WIP-NV-L3-00-5070-T401-P_IESNA2002.IES'
                        }, ]
                    },
                    certification: {
                        type: "list",
                        title: 'Certification',
                        fileList: [{
                            fileName: 'Catalogue of AOK iP Series LED Street Light.pdf',
                            fileUrl: 'file/Catalogue of AOK iP Series LED Street Light.pdf'
                        }, {
                            fileName: 'Catalogue of AOK iP Series LED Street Light.pdf',
                            fileUrl: 'file/Catalogue of AOK iP Series LED Street Light.pdf'
                        }, {
                            fileName: 'Catalogue of AOK iP Series LED Street Light.pdf',
                            fileUrl: 'file/Catalogue of AOK iP Series LED Street Light.pdf'
                        }, {
                            fileName: 'Catalogue of AOK iP Series LED Street Light.pdf',
                            fileUrl: 'file/Catalogue of AOK iP Series LED Street Light.pdf'
                        }, ]
                    },
                    imgUrl: 'images/listImg.jpg',
                    imgList: [{
                        url: 'images/listImg.jpg'
                    }, {
                        url: 'images/listImg2.jpg'
                    }, {
                        url: 'images/listImg.jpg'
                    }, {
                        url: 'images/listImg.jpg'
                    }, {
                        url: 'images/listImg.jpg'
                    }, {
                        url: 'images/listImg.jpg'
                    }, {
                        url: 'images/listImg.jpg'
                    }, {
                        url: 'images/listImg.jpg'
                    }, ], //图片
                    imgIndex: '',
                    detailedTop: [{
                            name: 'Model',
                            value: ' AOK-150WiP ',
                        },
                        {
                            name: 'Brand',
                            value: ' AOK ',
                        },
                        {
                            name: 'Code',
                            value: ' 94054090 ',
                        },
                    ],
                    // bottom------------------------------------------
                    quickLinks: [{
                            name: 'Warranty Policy'
                        },
                        {
                            name: 'Warranty Policy'
                        },
                        {
                            name: 'Warranty Policy'
                        },
                        {
                            name: 'Warranty Policy'
                        },
                        {
                            name: 'Warranty Policy'
                        },
                        {
                            name: 'Warranty Policy'
                        }
                    ],
                    productsProjects: [{
                            name: 'Products Projects'
                        },
                        {
                            name: 'Products Projects'
                        },
                        {
                            name: 'Products Projects'
                        },
                        {
                            name: 'Products Projects'
                        },
                        {
                            name: 'Products Projects'
                        },
                        {
                            name: 'Products Projects'
                        },
                        {
                            name: 'Products Projects'
                        },
                    ],
                    isShow: true,
                }
            },
            mounted() {
                const that = this;
                that.screenWidth = window.innerWidth;
                window.onresize = function () {
                    return that.screenWidth = window.innerWidth
                };
                console.log(that.screenWidth);
            },
            watch: {
                screenWidth(val) {
                    // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
                    if (!this.timer) {
                        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
                        this.screenWidth = val
                        this.timer = true
                        let that = this
                        setTimeout(function () {
                            // 打印screenWidth变化的值
                            console.log(that.screenWidth)
                            if (that.screenWidth < 992) {
                                console.log("haole");
                                that.dropdownShow = true
                                that.navShow = false
                            }
                            that.timer = false
                        }, 400)
                    }
                }
            },
            created() {
                this.id = this.get_query_string('id');
                console.log(this.id);

                window.addEventListener('resize', this.handleResize)
                this.handleResize()
            },
            methods: {
                handleResize(event) {
                    this.fullWidth = document.documentElement.clientWidth;
                    // 页面宽度小于750px时，不显示地图
                    if (this.fullWidth < 500) {
                        this.isShow = false;
                        this.dropdownShow = false
                        this.navShow = true
                    } else {
                        this.isShow = true;
                        this.dropdownShow = true
                        this.navShow = false
                    }
                },
                // 样式处理---------------------------------------------
                selectStyle: function () {
                    var that = this;
                    that.navShow = true
                },
                outStyle: function () {
                    var that = this;
                    that.navShow = false
                },
                handleNodeClick: function (data) {
                    console.log(data);
                },
                selectDropdownDiv: function (item, index) {
                    console.log(item)
                    var that = this;
                    that.dropdownIndex = index;
                    that.btnList = item.children;
                },
                // 样式处理结束------------------------------------------
                get_query_string: function (name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                    var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配

                    var context = "";
                    if (r != null) context = r[2];
                    reg = null;
                    r = null;
                    return context == null || context == "" || context == "undefined" ? "" : context;
                },
                // 鼠标进入原图空间函数
                enterHandler: function () {
                    // 层罩及放大空间的显示
                    this.topShow = true
                    this.rShow = true
                },
                // 鼠标移动函数
                moveHandler: function (event) {
                    // 鼠标的坐标位置
                    let x = event.offsetX
                    let y = event.offsetY
                    // 层罩的左上角坐标位置，并对其进行限制：无法超出原图区域左上角
                    let topX = (x - 50) < 0 ? 0 : (x - 50)
                    let topY = (y - 50) < 0 ? 0 : (y - 50)
                    // 对层罩位置再一次限制，保证层罩只能在原图区域空间内
                    if (topX > 400) {
                        topX = 400
                    }
                    if (topY > 400) {
                        topY = 400
                    }
                    // 通过 transform 进行移动控制
                    this.topStyle.transform = `translate(${topX}px,${topY}px)`
                    this.r_img.transform = `translate(-${2 * topX}px,-${2 * topY}px)`
                },
                // 鼠标移出函数
                outHandler: function () {
                    // 控制层罩与放大空间的隐藏
                    this.topShow = false
                    this.rShow = false
                },
                lookImg: function (url, index) {
                    console.log(url)
                    var that = this;
                    that.imgUrl = url;
                    that.imgIndex = index;
                }
            }
        })
    </script>
</body>

</html>